<route lang="json5" type="page">
  {
    layout: 'default',
    style: {
      navigationBarTitleText: '班级详情',
    },
    anonymous: false
  }
</route>

<script setup lang="ts">
import ClassStudentCard from './components/ClassStudentCard.vue'
import { ClassApi, LessonApi, StatApi } from '@/apis'
import ClassCard from '@/components/ClassCard.vue'

const classId = ref()
const classInfo = ref<ClassApi.ClassInfoResp>()
const classStat = ref<StatApi.ClassStat>()
const normalStudentList = ref<ClassApi.ClassStudentResp[]>([])
const cancelStudentList = ref<ClassApi.ClassStudentResp[]>([])
const lessonList = ref<LessonApi.ClassLessonResp[]>([])

const getClassDetail = async () => {
  classInfo.value = await ClassApi.getClassDetail(classId.value)
}
const getClassStat = async () => {
  classStat.value = await StatApi.getClassStatByClassId(classId.value)
}

const getClassStudent = async () => {
  const query: ClassApi.ClassStudentQuery = {
    classId: classId.value,
  }
  const res = await ClassApi.getClassStudentList(query)
  normalStudentList.value = res.filter(item => item.status === 'NORMAL')
  cancelStudentList.value = res.filter(item => item.status === 'CANCELED')
}

const getClassLesson = async () => {
  lessonList.value = await LessonApi.getClassLessonList(classId.value)
}

const gotoLessonDetail = (item) => {
  uni.navigateTo({
    url: `/pages/class/lesson?id=${item.id}`,
  })
}

onLoad((options) => {
  if (options.id) {
    classId.value = options.id
    getClassDetail()
    getClassStat()
    getClassStudent()
    getClassLesson()
  }
})
</script>

<template>
  <view class="px pb-safe">
    <view class="mt-[24rpx]">
      <ClassCard v-if="classInfo" :item="classInfo">
        <template #bottom>
          <view class="mt-[24rpx] flex gap-[16rpx]">
            <view class="flex-col-center-center flex-1 border-rd-[8rpx] bg-[#F8F8F8] py-[10rpx]">
              <view>
                <text class="font-size-[36rpx] color-[#33AD7C] font-600">
                  {{ classStat?.fullRate || 0 }}
                </text>
                <text class="font-size-[24rpx] color-[#666]">
                  %
                </text>
              </view>
              <view class="font-size-[26rpx] color-[#4E5969]">
                满班率
              </view>
            </view>
            <view class="flex-col-center-center flex-1 border-rd-[8rpx] bg-[#F8F8F8] py-[10rpx]">
              <view>
                <text class="font-size-[36rpx] color-[#33AD7C] font-600">
                  {{ classStat?.renewalRate || 0 }}
                </text>
                <text class="font-size-[24rpx] color-[#666]">
                  %
                </text>
              </view>
              <view class="font-size-[26rpx] color-[#4E5969]">
                续报率
              </view>
            </view>
            <view class="flex-col-center-center flex-1 border-rd-[8rpx] bg-[#F8F8F8] py-[10rpx]">
              <view>
                <text class="font-size-[36rpx] color-[#33AD7C] font-600">
                  {{ classStat?.retainedRate || 0 }}
                </text>
                <text class="font-size-[24rpx] color-[#666]">
                  %
                </text>
              </view>
              <view class="font-size-[26rpx] color-[#4E5969]">
                留存率
              </view>
            </view>
          </view>
        </template>
      </ClassCard>
    </view>
    <wd-tabs class="mt-2" inactive-color="#86909C" :line-width="24" :line-height="4">
      <wd-tab :title="`在读学员(${normalStudentList.length})`">
        <view v-for="(item, index) in normalStudentList" :key="index" class="mt-[24rpx]">
          <ClassStudentCard :data="item.student">
            <template #extra>
              <view class="font-size-[28rpx]" :class="{ 'text-gray': !item.isRenewal, 'color-primary': item.isRenewal }">
                {{ item.isRenewal ? '已续报' : '' }}
              </view>
            </template>
          </ClassStudentCard>
        </view>
        <view v-if="!normalStudentList.length">
          <wd-status-tip image="content" tip="暂无数据" />
        </view>
      </wd-tab>
      <wd-tab :title="`课次列表(${lessonList.length})`">
        <view
          v-for="(item, index) in lessonList"
          :key="index" class="mt-[24rpx] flex-row-between-center gap-[16rpx] rounded-2 bg-white p-[24rpx]" @click="gotoLessonDetail(item)"
        >
          <view class="text-30rpx text-main">
            {{ item.lessonDate }} {{ item.weekName }}
          </view>
          <view class="flex-row-start-center">
            <text class="text-28rpx text-secondary">
              {{ item.title }}
            </text>
            <view class="ml-1">
              <wd-tag v-if="item.lessonStatus === 0" mark>
                停课
              </wd-tag>
              <wd-tag v-else-if="item.lessonStatus === 1 || item.lessonStatus === 2" color="#0083ff" bg-color="#d0e8ff" mark>
                待上课
              </wd-tag>
              <wd-tag v-else-if="item.lessonStatus === 3" type="primary" mark>
                已上课
              </wd-tag>
            </view>
          </view>
        </view>
        <view v-if="!lessonList.length">
          <wd-status-tip image="content" tip="暂无数据" />
        </view>
      </wd-tab>
      <wd-tab :title="`退费学员(${cancelStudentList.length})`">
        <view v-for="(item, index) in cancelStudentList" :key="index" class="mt-[24rpx]">
          <ClassStudentCard :data="item.student">
            <template #extra>
              <view class="font-size-[28rpx] color-[#e08945]">
                已退费
              </view>
            </template>
          </ClassStudentCard>
        </view>
        <view v-if="!cancelStudentList.length">
          <wd-status-tip image="content" tip="暂无数据" />
        </view>
      </wd-tab>
    </wd-tabs>
  </view>
</template>

<style lang="scss" scoped>
  :deep(.wd-tabs__nav-container) {
    background: #f8f8f8;
  }

  :deep(.wd-tabs__container) {
    background: #f8f8f8;
  }
  // :deep(.wd-tabs__body) {
  //   background: #f8f8f8;
  // }
</style>
